如何通过css实现自动换行[亲测有效]最近在公司做web页面的时候，就遇到了一个需要自动换行的这个场景，当时第一时间想到的是使用Js来完成自动换行，但是用js又有点麻烦，代码有点多，于是就想到通过css来实现自动换行。以下两种方法都是通过css来实现的两种方法的使用，要看什么情况下吧？方法1，这种方法是使用word-break:break-all:width:120px;前面的是指定自动换行，后面的是告诉它宽度超过120p

大家好，我是你的好朋友思创斯。今天说一说如何通过css实现自动换行[亲测有效],希望您对编程的造诣更进一步.

最近在公司做web页面的时候，就遇到了一个需要自动换行的这个场景，当时第一时间想到的是使用Js来完成

自动换行，但是用js又有点麻烦，代码有点多，于是就想到通过css来实现自动换行。以下两种方法都是通过css来实现的

两种方法的使用，要看什么情况下吧？

方法1，这种方法是使用word-break:break-all:width:120px;前面的是指定自动换行，后面的是告诉它宽度超过120px之后就自动换行

但是这种方法只能控制当前文字的自动换行，不能实现不同文字之间的换行，比如标题1和标题2，当标题1的长度超出多少之后，

标题2就自动换行，标题2的长度超出多少之后，标题2就自动换行，沉思良久，感觉这种方法不够灵活，而且跟现在所使用的场景

也不太匹配。反正我是试来试去，只能控制当前文本

方法2，写一个父盒子，父盒子里面包含两个子盒子，分别把两个子盒子转换成块级元素，由内容撑开盒子，如果父盒子里面的A盒子内容超出

就会把盒子B给挤下去，如果盒子B里面的内容过长，自已就掉下去了，从而实现自动换行的目地

如下图，可做参考，核心部分保留在。

文章由思创斯整理,转载请注明出处：https://ispacesoft.com/103523.html